<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>DOM 变动观察器（Mutation observer）</title>
	</head>
	<body>
		<div contenteditable id="elem">Click and <b>edit</b>, please</div>

		<script>
			const elem = document.querySelector('#elem')

			const ob = new MutationObserver((mutationObserver) => {
				console.log(mutationObserver)
			})

			// 观察除了特性之外的所有变动
			ob.observe(elem, {
				childList: true, // 观察直接子节点的变动
				subtree: true, // 及其更低的后代节点的变动
				characterDataOldValue: true, // 将旧的数据传递给回调
			})
		</script>
	</body>
</html>
